<template>
  <div>
    <el-button @click="dialogVisible = true">打开弹框</el-button>
    <el-input v-model="text"></el-input>
    <el-dialog
      style="position: fixed;"
      v-dialogDrag
      :modal="false"
	    :close-on-click-modal="false"
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
      v-if="dialogVisible"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>


<script>
import Draggable from './Draggable.vue'

import draggable from '@/libs/draggable.js';

export default {
  directives: {
    draggable,
  },
  components: {
    Draggable
  },
  data() {
    return {
      dialogVisible: false,
      text: "",
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    },
    handleDrag (dx, dy) {
      this.$emit('drag', dx, dy)
    }
  },
}
</script>

<style scoped>
/* 覆盖层元素增加可穿透点击事件 */
.el-dialog__wrapper {
  pointer-events:none;
}

/* 弹窗层元素不可穿透点击事件（不影响弹窗层元素的点击事件） */
.el-dialog {
  pointer-events:auto;
}

</style>